<template>
	<view class="backPassword">
		<view class="backPassword-headr">
			<image src="@/static/images/login/bianzu.png" mode="widthFix"></image>
		</view>
		<view class="backPassword-toback" @click="toback">
			<u-icon name="arrow-left"  size="22"></u-icon>
		</view>
		<view class="backPassword-center">
			<view class="backPassword-center-logo">
				<image src="@/static/images/login_logo.png" mode=""></image>
			</view>
			<view class="backPassword-center-yzm" v-if="index==1">
				<text>短信验证码已发送至+86 {{codePhone}}</text>
			</view>
			<view class="backPassword-center-form">
			  <view class="backPassword-center-form-title">
			  	<text>{{title}}</text>
			  </view>
			  <view class="backPassword-center-form-item" style="margin-top: 56rpx;">
			  	<view class="backPassword-center-form-item-icon">
			  		<image src="@/static/images/login/phone.png" mode=""></image>
			  	</view>
			  	<view class="backPassword-center-form-item-input" :style="index==1?'marginTop:10rpx':''">
			  		<u--input v-if="index==0" clearable border="none" v-model="username" maxlength="11" type="number"  placeholder="请输入手机号"></u--input>
			  	     <VerifyCode
				
					 v-show="index==1"
			  	     :islabel="false"
					 :trigger="index"
			  	     name="请输入验证码" :username="username"  v-model="verify_code" ></VerifyCode>
				 	
					<u-input v-show="index==2&&captchaUrl" clearable border="none" v-model="password" maxlength="16"  type="password"  placeholder="请输入密码">
						 <u-icon @click="paswwType" v-if="password"  slot="suffix" :name="captchaUrl?'eye-off':'eye'" ></u-icon>
					</u-input>
					<u-input v-show="index==2&&!captchaUrl" clearable border="none" v-model="password" maxlength="16"  type="text"  placeholder="请输入密码">
						 <u-icon @click="paswwType" v-if="password"  slot="suffix" :name="captchaUrl?'eye-off':'eye'" ></u-icon>
					</u-input>
				</view>
			  </view>
			  <view class="backPassword-center-form-item" v-if="index==2">
			  	<view class="backPassword-center-form-item-icon">
			  		<image src="@/static/images/login/mima.png" mode=""></image>
			  	</view>
			  	<view class="backPassword-center-form-item-input">
			  		<u-input v-show="reCaptchaUrl" clearable border="none" v-model="repassword" maxlength="16"  type="password"  placeholder="请确认密码">
						<u-icon v-if="repassword" @click="rePaswwType"  slot="suffix" :name="reCaptchaUrl?'eye-off':'eye'" ></u-icon>
					</u-input>
					<u-input v-show="!reCaptchaUrl" clearable border="none" v-model="repassword" maxlength="16"  type="text"  placeholder="请确认密码">
						<u-icon v-if="repassword" @click="rePaswwType"  slot="suffix" :name="reCaptchaUrl?'eye-off':'eye'" ></u-icon>
					</u-input>
			  	</view>
			  </view>
			  <view class="backPassword-center-form-btn" @click="verify">
			  	<text>{{btnlist[index]}}</text>
			  </view>
			  <view class="backPassword-center-form-agreement" v-if="index==2">
			  	<u-checkbox-group @change="changePact">
			  		<u-checkbox 
			  		labelColor="#B1B2B5"
			  		:checked="pact"
			  		size="16"
			  		shape="circle"
			  		></u-checkbox>
			  	</u-checkbox-group>
			  	<text>您已阅读并同意 <text @click="toPage('/pages/Pact/index?type=user_agreement')">《用户服务协议》</text>和 <text @click="toPage('/pages/Pact/index?type=privacy_agreement')">《隐私政策》</text></text>
			  </view>
			  <u-popup bgColor="transparent" round="32rpx" :show="show" @close="show = false">
			  	<view class="draw-lots-main-popup savepadding savebottom">
			  		<view class="header flex al-item ju-cont">
			  			<view class="header-title">
			  				疯传数藏平台服务协议
			  				<!-- {{agreement.title}} -->
			  			</view>
			  			<view class="header-close">
			  				<u-icon @click="show = false" name="close" color="#999999" size="22"></u-icon>
			  			</view>
			  		</view>
			  		<PayPactServe />
			  		<button @click="show=false;pact=true">我已阅读并同意</button>
			  	</view>
			  </u-popup>
			  <u-popup bgColor="transparent" round="32rpx" :show="show2" @close="show2 = false">
			  	<view class="draw-lots-main-popup savepadding savebottom">
			  		<view class="header flex al-item ju-cont">
			  			<view class="header-title">
			  				隐私政策
			  				<!-- {{agreement.title}} -->
			  			</view>
			  			<view class="header-close">
			  				<u-icon @click="show2 = false" name="close" color="#999999" size="22"></u-icon>
			  			</view>
			  		</view>
			  		<PayPactPrivacy/>
			  		<button @click="show2=false;pact=true">我已阅读并同意</button>
			  	</view>
			  </u-popup>
			 
			</view>
		</view>
		<CodePopup
		title="重置登录密码"
		btnText="立即重置"
		:loading="loading"
		@show="e=>codeShow=e" 
		:show="codeShow" 
		:username="username" 
		v-model="verify_code" 
		
		></CodePopup>
	</view>
</template>

<script>
	import {
		mixin
	} from '@/Mixins/mixin.js'
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import Input from '@/components/Input.vue'
	import VerifyCode from '@/components/verifycode.vue'
	import PayPactPrivacy from '@/components/PayPactPrivacy.vue';
	import PayPactServe from '@/components/PayPactServe.vue';
	import CodePopup from '@/components/codePopup.vue'
	export default{
		mixins: [mixin],
		components:{VerifyCode, PayPactPrivacy, PayPactServe,CodePopup},
		data(){
			return{
				loading:true,
			   codeShow:false,
			   verify_code:'',
			   username:'',
			   password:'',
			   repassword:'',
			   title:'找回密码',
			   btnlist:['获取验证码','确认','确认'],
			   index:0,
			   show:false,
			   show2:false,
			   pact:false,
			   codePhone:'',
			   captchaUrl:true,
			   reCaptchaUrl:true
			}
		},
		methods:{
			paswwType(){
				this.captchaUrl=!this.captchaUrl
			},
			rePaswwType(){
				this.reCaptchaUrl=!this.reCaptchaUrl
			},
			userAgreement(){
				this.show = true
			},
			userPrivacy(){
				this.show2 = true
			},
			changePact(e){
				if(e.length>0){
					this.pact = true
				}else{
					this.pact = false
				}
			},
			toback(){
				uni.navigateTo({
					url:'/pages/Login/index'
				})
			},
			verify(){
				if(this.index==0){
					if(this.username.length<11){
						uni.showToast({
						    title: '请输入正确的手机号！',
							icon:'none',
						})
						return
					}else{
						if(this.index==0){
							this.codePhone = this.username.slice(0,3) + '****'+this.username.slice(7,11)
						    this.index = 1
						}
					}
					
					
					
				}
				if(this.index==1){
					if(this.verify_code.length!=4){
						uni.showToast({
						    title: '请输入正确格式的验证码！',
							icon:'none',
						})
					}else{
						this.verifySmsFcn()
					
						// this.$refs.uForm.validate().then(res => {
						// 	console.log(res)
						// })
					}
				}
				if(this.index==2){
                    if(this.pact){
						let paw =  /^(?=.*\d)(?=.*[a-zA-Z])(?=.*[~!@#$%^&.*])[\da-zA-Z~!@#$%^&.*]{8,16}$/
						let result=  paw.test(this.password)
						// let result1 = paw.test(this.repassword)
						if(this.password===this.repassword){
							// if(!result){
							// 	uni.showToast({
							// 	    title: '密码包含字母、数字、特殊符号，长度大于等于8！',
							// 		icon:'none',
							// 	})
								
							// }else{
								this.resrtPawFcn()
							// }
							
						}else{
							uni.showToast({
							    title: '俩次密码不一致！',
								icon:'none',
							})
						}
					}else{
						uni.showToast({
						    title: '请勾选协议后继续',
							icon:'none',
						})
					}
					
					
					
				}
			},
		 async	verifySmsFcn(){
				const res = await this.$http({
					url: this.$api.verifySms,
					method: 'POST',
					pay: true,
					hideLoading: true,
					// responseType: 'arraybuffer',
					data: {
						username: this.username,
						sms_code:this.verify_code
					}
				})
				if(res.code===200){
					this.index = 2
				}else{
					uni.showToast({
					    title: res.msg,
						icon:'none',
					})
				}
				
			},
		async resrtPawFcn(){
				let res = await this.$http({
					url:this.$api.setPassword,
					method: 'POST',
					hideLoading: true,
					data:{
						username:this.username,
						verify_code:this.verify_code,
						password:this.password,
						repassword:this.repassword
					}
				})
				if(res.code===200){
					uni.showToast({
					    title: '修改成功！',
						icon:'none',
					})
					setTimeout(()=>{
						uni.navigateTo({
							url:'/pages/Login/index'
						})
					},1500)
				}else{
					uni.showToast({
					    title: res.msg,
						icon:'none',
					})
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.backPassword{
		background-color: #F9F8FF;
		width: 100vw;
		height: 100vh;
		&-headr{
			width: 100vw;
			image{
				width: 100%;
			}
		}
		&-toback{
			/*  #ifdef H5 */
			top: 34rpx;
			/* #endif */
			/*  #ifdef APP */
			top: calc(88rpx + 34rpx);
			/* #endif */
			left: 30rpx;
			position: absolute;
			z-index: 999;
			
		}
		&-center{
			
			&-logo{
				width: 180rpx;
				height: 180rpx;	
				background: #FFFFFF;
				border-radius: 50%;
				margin: auto;
				transform: translateX(-50%);
				border: 6rpx solid #F6F9FF;
				margin-left: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				// margin-top: 14rpx;
				image{
					width: 135rpx;
					height: 135rpx;
				}
			}
			&-form{
				padding-bottom: 60rpx;
				width: calc(100vw - 80rpx);
				margin: auto;
				background: #FFFFFF;
				box-shadow: 0px 4rpx 8rpx 0px rgba(183,192,210,0.1300);
				border-radius: 40rpx;
				margin-top: -120rpx;
		        padding-top: 154rpx;
				&-title{
					text-align: center;
					font-size: 36rpx;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #16172F;
				}
				&-item{
					width: calc(100vw - 80rpx - 110rpx);
					height: 88rpx;
					background: #F5F9FF;
					border-radius: 55rpx;
					margin-left: 60rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-bottom: 28rpx;
					&-icon{
						width: 32rpx;
						height: 32rpx;
						margin-left: 36rpx;
						display: flex;
						image{
							width: 100%;
							height: 100%;
						}
					}
					&-input{
					
						width: calc(100% - 100rpx);
					    margin-left: 5rpx;
						
					}
				}
				&-btn{
					width: calc(100vw - 80rpx - 110rpx);
					height: 88rpx;
					background: #468EFF;
					border-radius: 55rpx;
					margin-left: 60rpx;
					margin-top: 60rpx;
					font-size: 32rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 88rpx;
					text-align: center;
					
				}
				&-agreement{
					display: flex;
					justify-content: center;
					margin-top: 22rpx;
					padding-bottom: 40rpx;
					text{
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #8C93AA;
					}
				}
				}
				&-yzm{
					text-align: center;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #8C93AA;
				}
	}
}
	.draw-lots-main-popup {
		padding: 48rpx 38rpx;
		background: #1E2020;
		border-radius: 30rpx 30rpx 0px 0px;
	
		.header {
			display: flex;
			justify-content: space-between;
			&-title {
				font-size: 32rpx;
				font-weight: 600;
				color: #FFFFFF;
				line-height: 44rpx;
			}
	
			&-close {}
		}
	
		.draw-lots-list {
			margin-top: 20rpx;
			height: 50vh;
			overflow-y: auto;
	
			.pay-pact {
				font-size: 24rpx;
				font-weight: 400;
				color: #A0A0A0;
				line-height: 34rpx;
			}
		}
	
		button {
			height: 80rpx;
			font-size: 30rpx;
			font-weight: 600;
			color: #4E422C;
			background-color: #F2E0BC;
			line-height: 80rpx;
		}
	}
</style>